<!--排班计划主组件-->
<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>班组分类</label>
                <el-input v-model="searchForm.TeamType" style="width: 160px;" placeholder="请输入班组分类"></el-input>
            </div>
            <div>
                <label>排班编号</label>
                <el-input v-model="searchForm.PlanCode" style="width: 160px;" placeholder="请输入排班编号"></el-input>
            </div>
            <div>
                <label>排班名称</label>
                <el-input v-model="searchForm.PlanName" style="width: 160px;" placeholder="请输入排班名称"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
                <!--<el-button type="warning" plain icon="el-icon-top-left" @click="entail" size="small">导出</el-button>-->
            </div>


            <!--表单-->
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="PlanCode" label="排班编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="PlanName" label="排班名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TeamType" label="班组分类" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TeamCode" label="班组编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TeamName" label="班组名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="" label="班组人员" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="ShiftDuration" label="轮班时长" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ShiftWay" label="轮班方式" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ChangeShiftWay" label="倒班方式" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="开始日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.StartDate | formatDateTime  }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="结束日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.EndDate | formatDateTime  }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" :show-overflow-tooltip="true" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                        <el-button type="text" @click="details(scope.row)">明细</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
        </div>

        <!--弹窗-->
        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="40%" @close="closeDialog">
            <PlanTeamInput :model="model" :isUpdate="isUpdate" @callback="callback"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
            <PlanTeamDetails :model="model" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" />
        </el-dialog>

    </div>
</template>

<script>
import PlanTeamInput from './components/PlanTeamInput.vue'
import PlanTeamDetails from './components/PlanTeamDetails.vue'
import Pagination from '@/components/Pagination.vue'
export default {
    components: {
        PlanTeamInput,
        PlanTeamDetails,
        Pagination
    },
    mounted() {
        this.dataBind();
    },
    data() {
        return {
            //数据模型
            model: {
                PlanCode: '',
                PlanName: '',
                TeamCode: '',

                TeamType: '',
                TeamName: '',
                ShiftDuration: '',
                ShiftWay: '',

                ChangeShiftWay: '',
                StartDate: '',
                EndDate: ''
            },
            //搜索字段
            searchForm: {
                TeamType: '',
                PlanCode: '',
                PlanName: ''
            },
            //对话框对象
            dialogDomain: {
                title: '新增排班',
                dialogVisible: false,
                dialogType: 0
            },
            isUpdate: false,
            //数据模型
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false
        }
    },
    methods: {
        //新增按钮
        add() {
            this.dialogDomain.title = "新增排班"
            this.dialogDomain.dialogVisible = true
            this.isUpdate = false
            this.dialogDomain.dialogType = 0
        },
        //编辑按钮
        update(model) {
            this.dialogDomain.title = "编辑排班"
            this.dialogDomain.dialogVisible = true
            this.isUpdate = true
            this.model = model
            this.dialogDomain.dialogType = 0
        },
        details(model) {
            this.dialogDomain.title = "排班计划明细"
            this.dialogDomain.dialogVisible = true
            this.model = model
            this.dialogDomain.dialogType = 1
        },
        //批量删除
        dels() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    //获取选中的表格数据 并筛选id
                    var ids = this.$refs.dataForm.selection.map(x => x.Id)
                    //拼接参数
                    let params = new URLSearchParams();
                    params.append('ids', ids.join(','))
                    this.$http.delete('/api/PlanTeam/DelAll', {
                        data: params,
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        },
                        loading: this.$loading()
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
        //删除单条
        del(model) {
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('/api/PlanTeam', {
                        data: {
                            id: model.Id
                        },
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
        //对话框关闭事件
        closeDialog() {
            this.model = {
                PlanCode: '',
                PlanName: '',
                TeamCode: '',

                TeamType: '',
                TeamName: '',
                ShiftDuration: '',
                ShiftWay: '',

                ChangeShiftWay: '',
                StartDate: '',
                EndDate: ''
            }
        },
        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.searchForm.TeamType = ''
            this.searchForm.PlanCode = ''
            this.searchForm.PlanName = ''
        },
        //新增或编辑页面回调
        callback() {
            let actionName = this.isUpdate ? '编辑' : '新增';
            this.showNotify(actionName + '排班计划成功', 'success');
            this.dialogDomain.dialogVisible = false;
            this.dataBind();
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
        //获取数据
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/PlanTeam',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        TeamType: this.searchForm.TeamType,
                        PlanCode: this.searchForm.PlanCode,
                        PlanName: this.searchForm.PlanName
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        }
    }
}
</script>
<style scoped></style>
